<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>xmlLoad</title>
<style type="text/css">
h1{
	font-family:'돋움';
	color:#3399ff;

  }
  
#btnLoad{
	font-family:'돋움';
	color: #ffffff;
	
	background-color: #3399ff;
	border: 2px solid #aaaaaa;
	border-radius: 10px;
	
 }



</style>


<script>
//function 밖에서 var를 생성하면 전역형
var xhr;
var rs;

function init(){
	var btn = document.getElementById('btnLoad');//배열형태가 없어!
	rs = document.getElementById('result');
	
	
	//객체 생성 및 callback 함수 지정
	xhr=new XMLHttpRequest();
	xhr.onreadystatechange= xmlLoad;
	
	
	btn.onclick=function(){
		 var url= 'xmlDocTest.jsp';
		 xhr.open('get',url,true);
		 xhr.send();
 
	 }
}

function xmlLoad(){
	if(xhr.readyState==4 && xhr.status==200){
		var doc=xhr.responseXML; //XML 파일을 불러올 때 사용!
		var list=doc.getElementsByTagName('member');//태그는 리스트의 개수에 상관없이 반환형 배열형태!
		rs.innerHTML="Member 개수 : " + list.length;
		
		for(i=0; i<list.length; i++){
			
			
		
		
		var item = list.item(i);
		var n = item.getElementsByTagName('name').item(0).firstChild.nodeValue;
		var a = item.getElementsByTagName('addre').item(0).firstChild.nodeValue;
		var p = item.getElementsByTagName('phone').item(0).firstChild.nodeValue;
		
		
		rs.innerHTML += "<li>Name : " + n;
		rs.innerHTML += "<li>Address : " + a;
		rs.innerHTML += "<li>Phone : " + p;
		rs.innerHTML += "<hr/>";
		}
	}	
}



</script>
</head>
<body>
<h1>XML 문서 처리 결과</h1>
<input type='button' value='XML LOAD' id='btnLoad'><p/>
<div id='result'></div>
 

<script>init()</script>


</body>
</html>